<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    </head>
    <body>
        <div class="content">
            <div class="container-gray">
              <div class="container">
                <div class="row small center wow fadeInDown top__element" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInDown;">
                  <div class="span2 offset1"><a href="http://www.materialup.com/chat" target="_blank">Live demo</a></div>
                  <div class="span2"><a href="docs.html">How to use? </a></div>
                  <div class="span2"> <a href="#pricing" style="color: #eb3980;">Pricing</a></div>
                  <div class="span2">	<a target="_blank" href="https://github.com/matthieua/WOW">Github</a></div>
                  <div class="span2">	<a target="_blank" href="https://twitter.com/dellacm" title="Matt Dellac">@dellacm </a></div>
                </div>
              </div>
            </div>
            <div class="container-white">
              <div class="container">
                <div class="row">
                  <div class="span12 center"><img src="img/wow-logo.jpg" height="177" data-wow-iteration="3" data-wow-duration="0.15s" class="wow pulse" style="visibility: visible; animation-duration: 0.15s; animation-iteration-count: 3; animation-name: pulse;">
                    <h2 data-wow-duration="0.5s" class="wow bounceInDown" style="visibility: visible; animation-duration: 0.5s; animation-name: bounceInDown;">
                      Reveal Animations When You Scroll. Very <a target="_blank" href="https://daneden.github.io/animate.css/" title="Animate.css">Animate.css </a>Friend :-)
                      <br>
                      Easily customize animation settings: style, delay, length, offset, iterations...
                    </h2>
                  </div>
                </div>
              </div>
            </div>
            <div class="container-white">
              <div class="container circles">
                <div class="row">
                  <div data-wow-delay="0.5s" class="span3 wow rollIn" style="visibility: visible; animation-delay: 0.5s; animation-name: rollIn;">
                    <p class="circle bg-green">such easy</p>
                  </div>
                  <div data-wow-delay="0.5s" class="span3 wow bounceInDown center" style="visibility: visible; animation-delay: 0.5s; animation-name: bounceInDown;"><img src="img/wow-1.gif" height="200" class="wow animated" style="visibility: visible;"></div>
                  <div data-wow-delay="0.5s" class="span3 wow lightSpeedIn" style="visibility: visible; animation-delay: 0.5s; animation-name: lightSpeedIn;">
                    <p class="circle bg-yellow">very JS	</p>
                  </div>
                </div>
                <div class="row">
                  <div class="span3 wow rollIn center" style="visibility: hidden; animation-name: none;"><img src="img/wow-3.gif" height="200"></div>
                  <div data-wow-iteration="5" data-wow-duration="0.15s" class="span3 wow pulse" style="visibility: hidden; animation-duration: 0.15s; animation-iteration-count: 5; animation-name: none;">
                    <p class="circle bg-blue">WOW		</p>
                  </div>
                  <div class="span3 wow bounceInRight center" style="visibility: hidden; animation-name: none;"><img src="img/wow-12.gif" height="200"></div>
                </div>
                <div class="row">
                  <div class="span3 wow bounceInLeft" style="visibility: hidden; animation-name: none;">
                    <p class="circle bg-red">no jquery</p>
                  </div>
                  <div class="span3 wow flipInX center" style="visibility: hidden; animation-name: none;"><img src="img/wow-2.gif" height="200"></div>
                  <div class="span3 wow bounceInRight" style="visibility: hidden; animation-name: none;">
                    <p class="circle bg-purple">many anims	</p>
                  </div>
                </div>
                <div class="row">
                  <div class="span3 wow rollIn center" style="visibility: hidden; animation-name: none;"><img src="img/wow-5.gif" height="200"></div>
                  <div data-wow-iteration="5" data-wow-duration="0.15s" class="span3 wow shake" style="visibility: hidden; animation-duration: 0.15s; animation-iteration-count: 5; animation-name: none;">
                    <p class="circle bg-yellow">aint joke</p>
                  </div>
                  <div data-wow-iteration="2" class="span3 wow swing center" style="visibility: hidden; animation-iteration-count: 2; animation-name: none;">	<img src="img/wow-6.gif" height="200"></div>
                </div>
                <div class="row">
                  <div class="span3 wow rollIn" style="visibility: hidden; animation-name: none;">
                    <p class="circle bg-purple">how small</p>
                  </div>
                  <div data-wow-delay="0.5s" class="span3 wow bounceInUp center" style="visibility: hidden; animation-delay: 0.5s; animation-name: none;"><img src="img/wow-10.gif" height="200"></div>
                  <div data-wow-delay="0.5s" data-wow-duration="0.15s" class="span3 wow lightSpeedIn" style="visibility: hidden; animation-duration: 0.15s; animation-delay: 0.5s; animation-name: none;">
                    <p class="circle bg-green">3 kb only	</p>
                  </div>
                </div>
                <div class="row">
                  <div class="span3 wow rollIn center" style="visibility: hidden; animation-name: none;"><img src="img/wow-7.gif" height="200"></div>
                  <div data-wow-iteration="5" data-wow-duration="0.25s" class="span3 wow pulse" style="visibility: hidden; animation-duration: 0.25s; animation-iteration-count: 5; animation-name: none;">
                    <p class="circle bg-blue">just scroll</p>
                  </div>
                  <div class="span3 wow lightSpeedIn center" style="visibility: hidden; animation-name: none;"><img src="img/wow-9.gif" height="200"></div>
                </div>
                <div class="row">
                  <div data-wow-iteration="5" data-wow-duration="0.15s" class="span3 wow bounce" style="visibility: hidden; animation-duration: 0.15s; animation-iteration-count: 5; animation-name: none;">
                    <p class="circle bg-yellow">reveal now</p>
                  </div>
                  <div class="span3 wow bounceInUp center" style="visibility: hidden; animation-name: none;"><img src="img/wow-8.gif" height="200"></div>
                  <div class="span3 wow bounceInRight" style="visibility: hidden; animation-name: none;">
                    <p class="circle bg-red">so impress</p>
                  </div>
                </div>
                <div class="row">
                  <div class="span3 wow rollIn center" style="visibility: hidden; animation-name: none;"><img src="img/wow-4.gif" height="200"></div>
                  <div data-wow-iteration="5" data-wow-duration="0.15s" class="span3 wow flip" style="visibility: hidden; animation-duration: 0.15s; animation-iteration-count: 5; animation-name: none;">
                    <p class="circle bg-green">WOW</p>
                  </div>
                  <div class="span3 wow bounceInRight center" style="visibility: hidden; animation-name: none;"><img src="img/wow-11.gif" height="200"></div>
                </div>
                <div class="row">
                  <div data-wow-delay="0.5s" class="span3 wow rollIn" style="visibility: hidden; animation-delay: 0.5s; animation-name: none;">
                    <p class="circle bg-red">no jquery?!</p>
                  </div>
                  <div data-wow-delay="1s" class="span3 wow bounceInDown center" style="visibility: hidden; animation-delay: 1s; animation-name: none;"><img src="img/grumpy.gif" height="200"></div>
                  <div data-wow-delay="1.5s" class="span3 wow bounceInRight" style="visibility: hidden; animation-delay: 1.5s; animation-name: none;">
                    <p class="circle bg-purple">that sucks!	</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="container-white">
              <div class="container">
                <div class="row">
                  <div class="span12 center">
                    <h2>Brought to you by <a href="http://www.uplabs.com/" target="_blank">UpLabs</a>:</h2>
                    <p>
                      </p><div class="wow zoomIn" data-wow-duration="1s" data-wow-offset="100" style="visibility: hidden; animation-duration: 1s; animation-name: none;">
                        <div class="wow tada" data-wow-delay="1s" data-wow-duration="1s" style="visibility: hidden; animation-duration: 1s; animation-delay: 1s; animation-name: none;">
                          <div class="wow rubberBand" data-wow-delay="2000ms" data-wow-duration="1s" style="visibility: hidden; animation-duration: 1s; animation-delay: 2000ms; animation-name: none;">
                            <div class="wow pulse" data-wow-delay="300ms" data-wow-iteration="infinite" data-wow-duration="2s" style="visibility: hidden; animation-duration: 2s; animation-delay: 300ms; animation-iteration-count: infinite; animation-name: none;">
                              <a href="http://www.uplabs.com/" title="Daily Resources for designers &amp; coders - UpLabs" target="_blank">
                                <img src="img/uplabs.png" alt="UpLabs" class="center">
                              </a>
                            </div>
                          </div>
                        </div>
                      <p></p>
                    </div>
                    <div class="span12 center">
                      <h2>Commercial license:</h2>
                      <p>
                        If you want to use WOW.js to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. <a href="http://www.uplabs.com/market/license" target="_blank">Read more about UpLabs commercial licensing</a>.
                      </p>
                      <p>
                        Once purchased <a href="http://www.site.uplabs.com/posts/wow-js-commercial" target="_blank">on UpLabs</a>, you’ll receive a commercial license PDF and be all set to use WOW.js in your commercial applications.
                      </p>
                      <a name="pricing"></a>
                      <div class="row">
                        <div class="span6 center">
                          <div class="pricing pricing--single">
                            <a href="http://www.uplabs.com/posts/wow-js-commercial?utm_source=wow&amp;utm_medium=pricing&amp;utm_campaign=wow" target="_blank">
                              <span class="pricing-title">WOW.js Commercial</span>
                              <span class="pricing-name">Developer</span>
                              <span class="pricing-type">License</span>
                              <span class="pricing-description">For 1 Project</span>
                              <span class="price">$29</span>
                            </a>
                          </div>
                        </div>
                        <div class="span6 center">
                          <div class="pricing pricing--extended">
                          <a href="http://www.uplabs.com/posts/wow-js-commercial?utm_source=wow&amp;utm_medium=pricing&amp;utm_campaign=wow
      " target="_blank">
                            <span class="pricing-title">WOW.js Commercial</span>
                            <span class="pricing-name">Team</span>
                            <span class="pricing-type">License</span>
                            <span class="pricing-description">For Unlimited Projects</span>
                            <span class="price">$99</span>
                            </a>
                          </div>
                        </div>
                      </div>
                      <div class="span12 center">
                        <h2>Checkout my other projects!</h2>
                        <p>
                          <a target="_blank" href="http://www.uplabs.com/">* UpLabs *</a><br>
                          <a target="_blank" href="http://materialpalette.com/">* Material Palette *</a><br>
                          <a target="_blank" href="https://www.fliplingo.com/">* Fliplingo *</a>
                        </p>
                      </div>
                      <div class="span12 center">
                        <h2>Installing WOW.js takes only seconds: <a href="docs.html">Read the documentation</a></h2>
                        <p class="small">Developed by <a href="http://mynameismatthieu.com" title="Matt Dellac" target="_blank">Matt Dellac</a> –
                          Initiated &amp; Designed by <a target="_blank" href="http://www.webalys.com/" title="Webalys - Free Resources for Designers">Webalys</a>
                        </p>
                        <p class="small">
                          Contributed by <a href="http://attilaolah.eu/" title="Attila Oláh" target="_blank">Attila Oláh</a>
                        </p>
                        <p class="small">CSS animations powered by  <a href="https://github.com/matthieua/WOW">WOW.js </a>and <a href="https://daneden.me/animate" target="_blank" title="Animate.css">Animate.css</a></p><br><br>
                      </div>
      
                    </div>
                  </div>
                </div>
              </div>
            
            <!-- Wow -->
            <script src="./js/analytics.js"></script>
            <script src="./js/wow.min.js"></script>
            <script>
             new WOW().init();
           </script>
           <script>
             (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
             (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
             m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
             })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
      
             ga('create', 'UA-45901861-2', 'auto');
             ga('send', 'pageview');
      
           </script>
      
          
      </div></div>
        <script src="js/wow.min.js"></script>
        <script>
            new WOW().init();
        </script>
        <style>
            .box1{
                width: 500px;
                height: 500px;
                background:#fc4545;
            }
            .box2{
                width: 500px;
                height: 500px;
                background:#000000;
            }
            .box3{
                width: 500px;
                height: 500px;
                background:#a0f811;
            }
            .box4{
                width: 500px;
                height: 500px;
                background:#fda8a8;
            }
        </style>
        <script src="" async defer></script>
    </body>
    <style>
    </style>
</html>